<template>
  <div class="JudgesTeams">
    <img src="/static/img/btn_back.png" alt="btn" class="btn" @click="onNavToBack">
    <div class="items">
      <ul>
        <li v-for="v, k in teams" :key="k" @click="onNavTo(v.id)">
          <img :src="v.facepic" alt="pic">
          <span class="score">{{ teamScore(v.score) }}</span>
          <span>{{ v.name }}</span>     
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { querystring } from 'vux'

export default {
  name: 'JudgesTeams',
  data() {
    return {
      teams: []
    }
  },
  created() {
    this.$http({
      url: '/judge/teams',
      method: 'post',
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then(({data}) => {
      if (data.code == 0) {
        this.teams = data.data;
      } else {
        this.$router.go(-1);
      }
    });
  },
  methods: {
    onNavToBack() {
      this.$router.go(-1);
    },
    onNavTo(teamID) {
      this.$router.push(`/judges_team/${teamID}`);
    },
    teamScore(score) {
      if (score == null) return 0;
      return score;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../assets/scss/common.scss";

.JudgesTeams {
  @include bg('/static/img/bg.png');
  display: flex;
  flex-direction: column;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
  .btn {
    width: 20%;
    margin: 10px;
  }
  .items {
    box-sizing: border-box;
    padding: 0 10px;
    ul {
      list-style-type: none;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        margin-bottom: 20px;
        position: relative;
        img {
          width: 70%;
          height: 60%;
          border: 3px solid #FDA91A;
          border-radius: 100px;
          margin-bottom: 5px;
          box-shadow: 1px 1px 5px #666;
        }
        .score {
          @include img('/static/img/p3_bg_score.png', 34px, 34px, 63%, 45%);
          line-height: 34px;
          text-align: center;
          color: white;
        }
      }
    }
  }
}
</style>
